<template>
	<view class="content">
		<downloadPop  :file_path="file_path"></downloadPop>
		<!-- <mescroll-uni ref="mescrollRef" @init="mescrollInit" @up="upCallback" :up="upOption" :down="{ use: false }"> -->
			<view class="section-0">
				<view class="section-body">
					<view class="form">
						<view class="form-item">
							<view class="label">类别</view>
							<view class="shape"></view>
							<view class="input">
								<u--input placeholderClass="input-placeholder" class="input-body" placeholder="类别"
									v-model="form.category"></u--input>
							</view>
						</view>
						<view class="form-item">
							<view class="label">发文机构</view>
							<view class="shape"></view>
							<view class="input">
								<u--input placeholderClass="input-placeholder" class="input-body" placeholder="发文机构"
									v-model="form.IssuingAgency"></u--input>
							</view>
						</view>
						<view class="form-item">
							<view class="label">名称</view>
							<view class="shape"></view>
							<view class="input">
								<u--input placeholderClass="input-placeholder" class="input-body" placeholder="名称"
									v-model="form.project_name"></u--input>
							</view>
						</view>
						<view class="form-item">
							<view class="label">标准号</view>
							<view class="shape"></view>
							<view class="input">
								<u--input placeholderClass="input-placeholder" class="input-body" placeholder="标准号"
									v-model="form.Standard_number"></u--input>
							</view>
						</view>
						<view class="actions">
							<view class="action" @click="handleResetForm()">
								<text>重</text>
								<text>置</text>
							</view>
							<view class="action search" @click="handleSearch()">
								<text>查</text>
								<text>询</text>
							</view>
						</view>
						<view class="download">
								<u-button type="primary" text="技术标准附件下载" class="btn" @click="handleDownLoad()"></u-button>
						</view>
					</view>
					<view class="list">
						<view class="problem-wrapper" v-show="list.length < 1">
							<image src="https://www.mescroll.com/img/mescroll-empty.png"></image>
							<view class="">~ 空空如也 ~</view>
						</view>
						<view class="item" v-for="(item, index) in list" :key="index">
							<view class="parent" @click="expandChange(item.id, item.id, 2, index)">
								<view class="action">
									<view class="iconfont icon-xiangyou1"></view>
								</view>
								<view class="name">
								<span>{{ index + 1 }}.</span>
								<span>{{ item.main_file_name }}</span>
								</view>
							</view>
							<view class="child" v-if="expandList.indexOf(item.id) !== -1">
								<view class="child-item" v-for="(item2, idx) in item.children" :key="idx">
									<view class="top" @click="
                        expandChange(`${index}-${idx}`, item2.id, 3)">
										<view :class="`action ${
                        expandList.indexOf(`${index}-${idx}`) !== -1? 'action__active': ''}`">
											<view class="iconfont icon-xiangyou1" ></view>
										</view>
										<view class="name">
											<span>{{ index + 1 }}.{{ idx + 1 }}</span>
											<span>{{ item2.file_name }}</span>
										</view>
										<view class="table">
											<view class="">
												类别：{{item2.type}}
											</view>
											<view class="">
												发文机构：{{item2.mechanism}}
											</view>
										</view>
										<view class="table">
											<view class="">
												标准号：{{item2.standard_no}}
											</view>
											<view class="" v-show="item2.date">
												发文时间：{{item2.date}}
											</view>
										</view>
									</view>
									<view class="grad" v-show="item2.children<1" v-if="expandList.indexOf(`${index}-${idx}`) !== -1">
										<view class="grad-item" >
												<view style="font-size: 26rpx; line-height: 100rpx;
												 text-align: center; color: #7f98ae;">
													暂无内容
												</view>
										</view>
									</view>
									<view class="grad" v-if="expandList.indexOf(`${index}-${idx}`) !== -1">
										<view class="grad-item" v-for="(item3, idx3) in item2.children"
											:key="item3.id + idx3">
											<view class="details">
												<view class="grad-top">
													<span>{{ index + 1 }}.{{ idx + 1 }}.{{idx3+1}}</span>
													<span>{{ item3.file_name }} </span>
													
												</view>
												<view class="grad-conter">
													<span class="conter-left">标准号：{{ item3.standard_no }}</span>
													<span class="conter-right" v-show="item3.date">
														发文时间：{{ item3.date }}
													</span>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		<!-- </mescroll-uni> -->
	</view>
</template>

<script>
	import {
		TechnicalIndex,
		TechnicalInfo,
	} from "@/api/statistics.js";
	import downloadPop from '@/components/download_pop/index.vue';
	export default {
		components: { downloadPop },
		data() {
			return {
				form: {
					category:'',
					IssuingAgency:'',
					project_name: "",
					Standard_number:'',
				},
				list: [],
				expandList: [],
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				upOption: {
					textNoMore: "-- 没有更多了 --",
				},
				file_path: '',
				pageSize: 20,
				project_id: 0,
			};
		},

		methods: {
			// 重置
			handleResetForm() {
				for (let key in this.form) {
					this.form[key] = "";
				}
				this.upCallback()
			},
			// 查询
			handleSearch() {
				this.upCallback()
			},
			handleDownLoad(url) {
				this.file_path = 'http://58.213.29.99:9096/storage/upload/20220606/5b5d3b79752a827f6a928e67655f04b2.xls';
				setTimeout(() => {
					this.file_path = 'http://58.213.29.99:9096/storage/upload/20220606/5b5d3b79752a827f6a928e67655f04b2.xls';
				}, 0);
			},
			// download(){
			// 	const path='http://58.213.29.99:9096/storage/upload/20220606/5b5d3b79752a827f6a928e67655f04b2.xls'
			// 	window.location.href=path
			// },

			expandChange(id, project_id, deep, index) {
				const idx = this.expandList.indexOf(id);
				if (idx !== -1) {
					this.expandList.splice(idx, 1);
				} else {
					this.expandList.push(id);
				}
				if (project_id && deep === 3) {
					if (!this.list[id.split('-')[0]].children[id.split('-')[1]].children) {
						this.fetchInfo(id, project_id)
					}
				}
			},
			async fetchInfo(id, project_id) {
				uni.showLoading({
					title: '加载中...'
				})
				const {
					data
				} = await TechnicalInfo({
					id: project_id,
				})
				if (data.code === 1) {
					let dep = JSON.parse(JSON.stringify(this.list))
					dep[id.split('-')[0]].children[id.split('-')[1]].children = data.data
					this.list = dep
				}
				uni.hideLoading()
			},
			upCallback(){
				TechnicalIndex({type:this.form.category,mechanism:this.form.IssuingAgency,file_name:this.form.project_name,standard_no:this.form.Standard_number}).then(res=>{
					console.log(res.data.data);
					this.list=res.data.data
				})
			},
			// async get{TicketChildList(params) {
			//   const data = await ticketChildListApi({
			//     id: params,

			//   });
			// 	this.list.map(item=>{
			// 		item.children.map(item2=>{
			// 			if(item2.id===params){
			// 				item2.childList=data.data.data
			// 			}
			// 		})
			// 	})
			// },
		
			/*上拉加载的回调*/
			// async upCallback(page) {
			// 	const {
			// 		data
			// 	} = await TechnicalIndex({
			// 		...this.form,
			// 		page: page.num,
			// 		pageSize: 2000,
			// 	});
			// 	if (data.code === 1 && data.data.length != 0) {
			// 		// 接口返回的当前页数据列表 (数组)
			// 		let arr = [];
			// 		for (let key in data.data) {
			// 			arr.push(data.data[key]);
			// 		}
			// 		let curPageData = arr;
			// 		console.log(curPageData);
			// 		// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
			// 		let curPageLen = curPageData.length;
			// 		// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
			// 		// let totalPage = data.data.last_page;
			// 		// 设置列表数据
			// 		if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
			// 		this.list = this.list.concat(curPageData); //追加新数据
			// 		// 请求成功,隐藏加载状态
			// 		this.mescroll.endByPage(curPageLen, totalPage);
			// 		setTimeout(() => {
			// 			this.mescroll.endSuccess(curPageLen);
			// 			// this.mescroll.endSuccess(1);
			// 		}, 20);
			// 	} else {
			// 		//  请求失败,隐藏加载状态
			// 		this.mescroll.endErr();
			// 	}
			// },


		},
		created() {
			this.upCallback()
		}
		// onLoad(data) {
		//   if (data.type) {
		//     this.type = data.type;
		//   }
		//   this.curd = data.curd ? data.curd : 0;
		//       if (data.project_id) {
		//     this.project_id = data.project_id;
		//   }
		// },
	};
</script>

<style lang="scss" scoped>
	.section-0 {
		z-index: 10;
		background-color: #2e5efe;
		.section-body {
			width: 100%;
			height: 100%;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			background-color: #fff;
			overflow: hidden;
		}
		.list {
			width: 670rpx;
			box-sizing: border-box;
			margin-left: 40rpx;
			border-top: 2rpx solid #d8e4f2;
			.item {
				width: 100%;
				border-bottom: solid 2rpx #f2f2f0;
				.parent {
					width: 100%;
					@include clear();
					display: flex;
					.name {
						width: 640rpx;
						line-height: 30rpx;
						padding: 26rpx 0;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 2rpx;
						color: #3b3c40;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						span{
							margin-right: 10rpx;
						}
					}
					.action {
						width: 32rpx;
						margin-right: 18rpx;
						line-height: 82rpx;
						text-align: center;
						color: #3b3c40;
						.iconfont {
							font-size: 32rpx;
							transition: 0.2s ease;
							transform: rotate(90deg);
						}
					}
				}
				.child {
					width: 750rpx;
					margin-left: -40rpx;
					background: #f2f2fa;
					.child-item {
						width: 100%;
						border-bottom: 2rpx solid #e3e8f5;
						box-sizing: border-box;
						padding-left: 40rpx;
						@include clear();
						&:last-child {
							border-bottom: none;
						}
						.top {
							width: 100%;
							overflow: hidden;
							box-sizing: border-box;
							align-items: center;
							.name {
								width: calc(100% - 50rpx);
								box-sizing: border-box;
								padding: 26rpx 0;
								font-size: 26rpx;
								color: #3b3c40;
								font-size: 26rpx;
								display: flex;
								span{
									margin-right: 10rpx;
								}
							}
							
							.table{
								display: flex;
								justify-content: space-between;
								font-size: 22rpx;
								margin: 0 50rpx 20rpx 50rpx;
								color: #7f98ae;
							}
							.action {
								width: 32rpx;
								line-height: 82rpx;
								float: left;
								text-align: center;
								color: #7f98ae;
								margin-right: 18rpx;

								.iconfont {
									font-size: 32rpx;
									transition: 0.2s ease;
									transform: rotate(90deg);
								}
							}
						}
					}
				}
				.grad {
					width: 750rpx;
					margin-left: -40rpx;
					background: #d9d9e2;
					.grad-item {
						width: 100%;
						border-bottom: 1px solid #e3e8f5;

						&:last-child {
							border-bottom: none;
						}
						.details {
							width:calc(100%-100rpx) ;
							margin-left: 90rpx;
							margin-right: 50rpx;
							font-size: 23rpx;
							.grad-top {
								width: 100%;
								color: #7f98ae;
								overflow: hidden;
								display: flex;
								box-sizing: border-box;
								padding-top: 28rpx;
								span{
									margin-right: 10rpx;
								}
							}
							.grad-conter {
								display: flex;
								justify-content: space-between;
								color: #7f98ae;
								width: 100%;
								overflow: hidden;
								box-sizing: border-box;
								padding: 28rpx 0;
							}
						}
					}
				}
				.action__active {
					.iconfont {
						transform: rotate(-90deg) !important;
					}
				}
			}
		}
		.actions {
			width: 100%;
			height: 50rpx;
			margin-top: 29rpx;
			padding-bottom: 30rpx;
			display: flex;
			justify-content: space-between;
			.action {
				width: 288rpx;
				height: 48rpx;
				background-color: #1534ce;
				border-radius: 20rpx;
				text-align: center;
				line-height: 48rpx;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				color: #ffffff;
				text {
					&:first-child {
						margin-right: 20rpx;
					}
				}
			}
			.search {
				background-color: #1534ce;
			}
		}
		.download{
			margin-bottom: 30rpx;
			.btn{
				height: 48rpx;
				font-size: 26rpx;
				background-color: #1534ce;
				border-radius: 20rpx;
			}
		}
		.form {
			width: 100%;
			padding: 0 75rpx;
			padding-top: 40rpx;
			box-sizing: border-box;
			.form-item {
				width: 600rpx;
				height: 44rpx;
				border-radius: 30rpx;
				border: solid 1px #1534ce;
				margin: 0 auto;
				margin-bottom: 25rpx;
				&:last-child {
					margin-bottom: 34rpx;
				}
				@include clear();
				.label {
					float: left;
					width: 134rpx;
					height: 44rpx;
					text-align: center;
					line-height: 44rpx;
					font-size: 22rpx;
					font-weight: bold;
					color: #1534ce;
				}
				.shape {
					width: 3rpx;
					height: 32rpx;
					background-color: #7f98ae;
					float: left;
					margin-top: 8rpx;
				}
				.input {
					float: left;
					width: calc(100% - 134rpx - 3rpx);
					.input-body {
						box-sizing: border-box;
						width: 100%;
						height: 44rpx;
						padding: 0 !important;
						border: none;
						padding-left: 30rpx !important;
						padding-right: 30rpx !important;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.7);
					}
					.input-placeholder {
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.5);
					}
				}
			}
		}
		.problem-wrapper {
			color: #808080;
			margin: 0 auto;
			text-align: center;
			image {
				margin-top: 300rpx;
				width: 200rpx;
				height: 200rpx;
			}
		}
	}
</style>
